<template>
  <div class="com-container">
      <div class="com-chart" ref="rank_ref" style="height:550px" ></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            chartInstance:null,
            allData:null,
            startValue:0,
            endValue:9,
            timerId:null,
        }
    },
    destroyed(){
        clearInterval(this.timerId)
    },
    mounted(){
       this.$nextTick(()=>{
        this.initChart();
        this.getData();
        this.screenAdapter();
        window.addEventListener('resize',this.screenAdapter);
        
       }) 
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter);
    },
    methods:{
        initChart(){
            const initOption ={
                 title: {
                        text: '▎地区销售排行',
                        left: 20,
                        top: 20
                        },
                        grid: {
                        top: '40%',
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                        },
                        tooltip: {
                        show: true
                        },
                xAxis:{
                    type:'category'
                },
                yAxis:{
                    type:'value'
                },
                series:{
                    type:'bar'
                }
            };
            this.chartInstance = window.echarts.init(this.$refs.rank_ref,'chalk');
            // this.chartInstance = this.$echarts.init(this.$refs.rank_ref);
            this.chartInstance.setOption(initOption);
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timerId);
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval();
            })
        },
        async getData(){
            //得到数据
            const {data:ret} = await axios.get('http://localhost:8888/rank');
            this.allData =ret;
            this.allData.sort((a,b)=>{
                return b.value-a.value
            })
            console.log(this.allData);
            this.startInterval();
            
        },
        updateChart(){
            const colorArr = [
                ['#0BA82C', '#4FF778'],
                ['#2E72BF', '#23E5E5'],
                ['#5052EE', '#AB6EE5']
            ]
            const provinceArr =this.allData.map(item =>{
                return item.name;
            })
            const valueArr =this.allData.map(item=>{
                return item.value;
            })
            const dataOption ={
                xAxis:{
                    data:provinceArr
                },
                series:{
                    
                    data:valueArr,
                    itemStyle:{
                        color:arg=>{
                            let targetColor =null;
                            if(arg.value>300){
                                targetColor =colorArr[0]
                            }else if(arg.value>200){
                                targetColor =colorArr[1]
                            }else{
                                targetColor =colorArr[2]
                            }
                            return new window.echarts.graphic.LinearGradient(0,0,0,1,[
                                {
                                    offset:0,
                                    color:targetColor[0],
                                },
                                {
                                    offset:1,
                                    color:targetColor[1]
                                }
                            ])
                        }
                    
                    
                    
                    }                    
                },
                dataZoom:{
                    show:false,
                    startValue:this.startValue,
                    endValue:this.endValue
                }
            };
            this.chartInstance.setOption(dataOption);

        },
        screenAdapter(){
            const titleFontSize = this.$refs.rank_ref.offsetWidth / 100 * 3.6
            const adapterOption ={
                title: {
                    textStyle: {
                        fontSize: titleFontSize
                    }
                    },
                    series: [
                    {
                        barWidth: titleFontSize,
                        itemStyle: {
                        barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0]
                        }
                    }
                ]
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        startInterval(){
            if(this.timerId){
                clearInterval(this.timerId)
            }
           this.timerId= setInterval(()=>{
                this.startValue++;
                this.endValue++;
                if(this.endValue>this.allData.length-1){
                    this.startValue=0;
                    this.endValue=9;
                }
                this.updateChart();
            },2000)
        }

    }

}
</script>

<style>

</style>